1

场景:想请求量较大的网络数据,比如想获取1000条结果,但数据处理速度慢,有超时的风险,可以分成10次处理,每次处理100条;所有请求完成后再统一进行处理。

这样的应用场景,可以这样处理:

方案一:判断请求到的数据条目

// 模拟网络请求
function fetch(url, callback) {
  setTimeout(function (){
    callback(null, {
        subjects: [{
          data: Math.round(Math.random() * 100)
        }]
      });
  }, 2000);
}

// 实现方案1
function multiTask_1 () {
  var arr = [];
  var baseUrl = 'https://api.douban.com/v2/movie/top250';
  for (var start = 0; start < 10; start++) {
    var url = baseUrl + '?start=' + start + "&count=1";
      fetch(url, function(error, res) {
        var data = res.subjects;
        arr = arr.concat(data);
        // 调用完成后统一处理
        if (arr.length === 10) {
          console.log(arr);
        }
    });
  }
}

将运行结果用arr.length来判断,如果arr.length不像我们期望的那样,比如由于网络传输或者处理异常,少一条,那么我们将无法做后续的处理。这种处理方式强业务耦合;不具有普适性。

方案二:判断异步过程执行次数

// 方案2
function multiTask_2 () {
  var taskWatcher = 0;
  var arr = [];
  var baseUrl = 'https://api.douban.com/v2/movie/top250';
  for (var start = 0; start < 10; start++) {
    taskWatcher++;
    var url = baseUrl + '?start=' + start + "&count=1";
    fetch(url, function(error, res) {
        var data = res.subjects;
        arr = arr.concat(data);
        taskWatcher--;
        if (taskWatcher === 0) {
          console.log(arr);
        }
    });
  }
}

方案2 的判断条件,这里的 taskWatcher 充当异步任务执行情况的观察员,
仅与异步过程的调用次数有关,且与其他处理过程无关。那有没有其他方案呢

方案三:Promise.all()

Promise.all(iterable) 方法返回一个 Promise, 它将在上述可迭代对象中的所有 Promise 被 resolve 之后被 resolve,或者在任一 Promise 被 reject 后被 reject。

function multiTask_3 () {
  // var taskWatcher = 0;
  var taskStack = [];
  var arr = [];
  var baseUrl = 'https://api.douban.com/v2/movie/top250';
  for (var start = 0; start < 10; start++) {
    taskStack.push(
      new Promise((resolve, reject) => {
        var url = baseUrl + '?start=' + start + "&count=1";
        fetch(url, function(error, res) {
          var data = res.subjects;
          arr = arr.concat(data);
          resolve();
        });
      })
    );
  }

  Promise.all(taskStack).then(function () {
    console.log(arr);
  });
}

这种方式更具有通用性,如果异步任务类型不同,也可以用这种方式来解决。不过应当注意reject的处理。避免其对最终处理的影响。

方案四: EventProxy

EventProxy是朴灵写的,https://github.com/JacksonTian/eventproxy

  var ep = new EventProxy();
  var arr = [];
  ep.after('fetchData', 10, function (list) {
    list.forEach(function(item){
      arr = arr.concat(item); 
    });
    console.log(arr);
  });

  var baseUrl = 'https://api.douban.com/v2/movie/top250';
  for (var start = 0; start < 10; start++) {
    var url = baseUrl + '?start=' + start + "&count=1";
      fetch(url, function(error, res) {
        var data = res.subjects;
        ep.emit('fetchData', data);
    });
  }
  

EventProxy基于事件订阅/发布模式,这里的after 方法可以侦听多次事件,回调中保存了多次异步任务的数据结果的数组;除此之外EventProxy还支持多个不同事件的侦听和处理。


will233
538 声望3 粉丝

天下大事,必作于细。